<template>
    <div>
      <form>
        <label>奖项名称：</label><input type="text" v-model="label"/><label>人数：</label><input type="number" v-model="num"/><button v-on:click="getLucky">抽奖</button>
      </form>
      <p>获奖名单：</p>
      <ul>
        <li v-for="item in items">
          <span>{{item.label}}</span>
          <ul>
            <li v-for="user in item.name">{{user}}</li>
          </ul>
        </li>
      </ul>
    </div>
</template>

<script>
import getData from '../../lib/getData.js'
export default {
  name: 'lucky',
  data: function () {
    return {
      items: [],
      label: '',
      num: 0
    }
  },
  methods: {
    getLucky: function (e) {
      let that = this
      e.preventDefault()
      let postData = {
        'label': this.label,
        'num': this.num
      }
      that.$http.post('http://39.108.92.238:8088/getLucky', postData, {emulateJSON: true}).then(function (data) {
        that.items.push(data.body)
      })
      let getMsg = that.getMsg
      getData('ws://39.108.92.238:8080', getMsg)
    },
    getMsg: function (e) {
      console.log(e.data)
    }
  }
}
</script>

<style>
</style>